<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>星星评价</title>
	<link rel="stylesheet" href="layui-v2.4.5/css/layui.css">
</head>
<body>

	<div id="star">
		
	</div>



<script src="jquery-3.2.1.min.js"></script>
<script>
	
	$.fn.evaluate = function(options){
		var defaults = {
			"number": 5,    // 出现星星的个数，默认5
			"color": "#ccc",  // 星星的颜色，默认#ccc
			"colored": "#FFB800",  // 评价之后星星的颜色，默认#FFB800
			"size": "16px",  // 星星大小
			"marginR": "5px",  // 星星的间距
			"score": 5   // 设置默认评分，默认5星评价
		};
		var settings = $.extend({}, defaults, options); 
		// 将一个空对象作为第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值
		var html = "";
		for(let i=0;i<settings.number;i++){
			html += `<i class="layui-icon layui-icon-rate-solid"></i>`;
		}
		//在这里面,this指的是用jQuery选中的元素
		return this.each(function(){
			
			let indexed;  //保存点击之后选择的几星

			$(this).html(html);
			$(this).children("i").css({"color":settings.color, "cursor":"pointer", "font-size":settings.size, "margin-right": settings.marginR});
			$(this).children("i:last-child").css("margin-right","0px");

			// 鼠标移入星星事件
			$(this).on('mouseenter', 'i', function() {  
				$(this).parent().children().css("color", settings.color);
				$(this).css("color", settings.colored);
		    let index = $(this).index();
		    for(let i=0;i<=index;i++){
		    	$('i:nth-child(' + i + ')').css('color', settings.colored);
		    }
			});
			// 鼠标移出星星事件
			$(this).on('mouseleave', 'i', function() {  
				$(this).parent().children().css("color", settings.color);
				for(let i=0;i<=(indexed+1);i++){
		    	$('i:nth-child(' + i + ')').css('color', settings.colored);
		    }
			});
			// 鼠标点击星星事件
			$(this).on("click","i",function(){   
				
				$(this).parent().children().css("color", settings.color);
				$(this).css("color", settings.colored);
				indexed = $(this).index();
				
		    for(let i=0;i<=indexed;i++){
		    	$('i:nth-child(' + i + ')').css('color', settings.colored);
		    }
		    console.log("评价为几星：" + (indexed+1));

			});

			// 设置默认评价几星
			for(let i=0;i<settings.score;i++){
				$(this).find("i").eq(i).css('color', settings.colored);
			}
			indexed = settings.score-1;
			console.log("默认评价为几星：" + settings.score);
			
		});
		
	}
</script>
<script>
	$("#star").evaluate();
</script>
</body>
</html>